<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'
import { ElMessage } from 'element-plus'
import { Lock, User, Position, Avatar, Key, UserFilled, HomeFilled, Tools } from '@element-plus/icons-vue'

// 引入路由和用户状态管理
const router = useRouter()
const userStore = useUserStore()

// 表单数据
const loginForm = reactive({
  username: '',
  password: ''
})

// 表单验证规则
const rules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}

// 表单引用
const formRef = ref()

// 登录处理
const handleLogin = () => {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      const success = userStore.login(loginForm.username, loginForm.password)
      if (success) {
        ElMessage.success('登录成功')
        router.push('/')
      } else {
        ElMessage.error('用户名或密码错误')
      }
    } else {
      return false
    }
  })
}

// 访客模式登录
const loginAsVisitor = () => {
  userStore.loginAsVisitor()
  ElMessage.success('已以访客模式进入系统')
}

// 前往注册页面
const goToRegister = () => {
  router.push('/register')
}

// 返回欢迎页
const goToWelcome = () => {
  router.push('/welcome')
}
</script>

<template>
  <div class="login-container">
    <div class="login-box">
      <div class="login-header">
        <img src="../assets/logo.svg" alt="Logo" class="logo" />
        <h2>道路养护管理系统</h2>
        <p>欢迎登录系统</p>
      </div>

      <el-form
        ref="formRef"
        :model="loginForm"
        :rules="rules"
        class="login-form"
        label-position="top"
      >
        <el-form-item prop="username" label="用户名">
          <el-input
            v-model="loginForm.username"
            placeholder="请输入用户名"
            @keyup.enter="handleLogin"
          >
            <template #prefix>
              <el-icon><Avatar /></el-icon>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item prop="password" label="密码">
          <el-input
            v-model="loginForm.password"
            type="password"
            placeholder="请输入密码"
            show-password
            @keyup.enter="handleLogin"
          >
            <template #prefix>
              <el-icon><Key /></el-icon>
            </template>
          </el-input>
        </el-form-item>

        <div class="login-tips">
          <div class="tips-header">测试账号</div>
          <div class="account-list">
            <div class="account-item">
              <el-icon><UserFilled /></el-icon>
              <span>管理员: admin / admin123</span>
            </div>
            <div class="account-item">
              <el-icon><Tools /></el-icon>
              <span>养护员: maintainer / maint123</span>
            </div>
            <div class="account-item">
              <el-icon><User /></el-icon>
              <span>普通用户: user1 / user123</span>
            </div>
          </div>
        </div>

        <el-form-item>
          <el-button type="primary" class="login-button" @click="handleLogin">
            <el-icon><UserFilled /></el-icon> 登录
          </el-button>
        </el-form-item>

        <div class="alternative-actions">
          <el-button type="success" plain @click="loginAsVisitor">
            <el-icon><Position /></el-icon>
            以访客身份浏览
          </el-button>

          <el-button type="info" plain @click="goToRegister">
            <el-icon><User /></el-icon> 注册新账号
          </el-button>
        </div>

        <div class="form-footer">
          <el-button type="text" @click="goToWelcome">
            <el-icon><HomeFilled /></el-icon> 返回首页
          </el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #e6f7ff 0%, #d0e8f2 100%);
  background-size: cover;
}

.login-box {
  width: 400px;
  padding: 30px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.login-header {
  text-align: center;
  margin-bottom: 30px;
}

.logo {
  width: 80px;
  height: 80px;
  margin-bottom: 15px;
}

.login-header h2 {
  font-size: 24px;
  color: #409EFF;
  margin: 0;
  margin-bottom: 10px;
}

.login-header p {
  font-size: 16px;
  color: #606266;
  margin: 0;
}

.login-form {
  margin-top: 20px;
}

.login-button {
  width: 100%;
  padding: 12px 0;
  margin-top: 10px;
  background-color: #409EFF;
}

.login-tips {
  font-size: 12px;
  color: #909399;
  margin-bottom: 15px;
  background-color: #f8f8f8;
  padding: 12px;
  border-radius: 8px;
}

.tips-header {
  font-weight: bold;
  margin-bottom: 8px;
  color: #606266;
  font-size: 14px;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 5px;
}

.account-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.account-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.account-item .el-icon {
  color: #409EFF;
}

.alternative-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}

.form-footer {
  margin-top: 20px;
  text-align: center;
}
</style>
